<template>
  <div class="category-searchlist">
    <el-checkbox-group v-model="searchInfo.checked">
      <el-checkbox
        v-for="item in searchInfo.list"
        :label="getCurId(item)"
        :key="getCurId(item)"
        @change="handleSelectChecked"
      >
      {{ getCurPath(item) }}&nbsp;&nbsp;{{ getCurCode(item) }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
import {
  getCode,
  getPath,
  getId,
} from '../constants';
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    checkedList: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      searchInfo: {
        checked: [], // 选中的品类
        list: [], // 品类列表
      },
    }
  },
  watch: {
    // 监听数据源变化
    dataSource: {
      handler (val) {
        this.searchInfo.list = val
      },
      immediate: true,
    },
    // 监听选中的品类变化
    checkedList: {
      handler (val) {
        this.searchInfo.checked = val.map(item => getId(item))
      },
      immediate: true,
    },
  },
  methods: {
    // 选中品类
    handleSelectChecked () {
      const checkedList = this.searchInfo.list.filter(
        item => this.searchInfo.checked.includes(getId(item))
      )
      this.$emit('checked', checkedList)
    },
    // 清空
    clearList () {
      this.searchInfo = {
        checked: [], // 选中的品类
        list: [], // 品类列表
      }
    },
    // 获取品类编码
    getCurCode (item) {
      return getCode(item)
    },
    // 获取品类路径
    getCurPath (item) {
      return getPath(item)
    },
    // 获取品类uuid
    getCurId (item) {
      return getId(item)
    },
  }
}
</script>
<style lang="less" scoped>
.category-searchlist {
  .el-checkbox-group {
    border: 1px solid #ebeef5;
    padding-left: 5px;
    height: 200px;
    max-height: 200px;
    overflow-y: auto;
    label {
      width: 100%;
      line-height: 24px;
      &:first-child {
        margin-top: 10px;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
